<template>
    <div class="page-container">
        <!-- 说明信息 -->
        <div class="info-bar">
            <div class="info-content">
                <el-icon>
                    <InfoFilled />
                </el-icon>
                <span>在此设置大屏显示的相关参数，所有更改将自动保存</span>
            </div>
        </div>

        <!-- 表单区域 -->
        <el-form :model="form" label-width="120px" class="screen-form">
            <!-- 大屏比例 -->
            <el-form-item label="大屏比例">
                <el-radio-group v-model="form.screenRatioType" @change="handleRatioTypeChange">
                    <el-radio label="default" value="default">默认</el-radio>
                    <el-radio label="custom" value="custom">自定义</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 自定义比例 -->
            <el-form-item label="屏幕比例" v-if="form.screenRatioType === 'custom'">
                <div class="custom-ratio-inputs">
                    <el-input-number v-model="form.customWidth" :min="100" :max="5000" />
                    <span class="separator">×</span>
                    <el-input-number v-model="form.customHeight" :min="100" :max="5000" />
                    <span class="ratio-text">当前比例: {{ widthHeightRatio }}</span>
                </div>
            </el-form-item>

            <!-- 大屏效果 -->
            <el-form-item label="大屏效果">
                <div class="effects-container">
                    <div v-for="(effect, index) in form.effects" :key="index" class="effect-item">
                        <div class="effect-preview">
                            <img :src="effect.preview" alt="效果预览" class="effect-gif" />
                        </div>
                        <div class="effect-control">
                            <el-checkbox v-model="effect.enabled" @change="saveSettings">
                                {{ effect.name }}
                            </el-checkbox>
                            <el-button type="primary" size="small" @click="designEffect(effect)">
                                页面设计
                            </el-button>
                        </div>
                    </div>

                    <!-- 添加新效果 -->
                    <div class="effect-item add-effect" @click="addNewEffect">
                        <div class="add-effect-icon">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </el-form-item>
        </el-form>

        <!-- 固定操作栏 -->
        <FixedActionBar :visible="true">
            <!-- 默认插槽内容 -->
            <el-button @click="$router.push('/project-list')">返回活动列表</el-button>
            <el-button type="primary" @click="openScreen">
                <el-icon>
                    <Monitor />
                </el-icon>
                进入大屏
            </el-button>
            <!-- 右侧插槽内容 -->
            <!-- <template #left>
                <el-button @click="$router.push('/project-list')">返回活动列表</el-button>
            </template> -->
        </FixedActionBar>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Monitor, Plus, InfoFilled } from '@element-plus/icons-vue'
import FixedActionBar from '@/components/common/BottomActionBar.vue'

// 表单数据
const form = ref({
    screenRatioType: 'default',
    customWidth: 1920,
    customHeight: 1080,
    effects: [
        { name: '3D效果', enabled: false, preview: '/path/to/3d-effect.gif' },
        { name: '泡泡效果', enabled: false, preview: '/path/to/bubble-effect.gif' },
        { name: '签到墙', enabled: true, preview: '/path/to/signin-wall.gif' },
        { name: '多彩墙', enabled: false, preview: '/path/to/colorful-wall.gif' },
        { name: 'LOGO墙', enabled: false, preview: '/path/to/logo-wall.gif' }
    ]
})

// 计算宽高比例
const widthHeightRatio = computed(() => {
    const ratio = form.value.customWidth / form.value.customHeight
    return ratio.toFixed(2)
})

// 处理比例类型变化
const handleRatioTypeChange = () => {
    saveSettings()
}

// 自动保存设置
const saveSettings = () => {
    console.log('保存设置:', form.value)
    // 这里可以添加实际保存逻辑，如调用API
}

// 设计效果
const designEffect = (effect) => {
    console.log('设计效果:', effect.name)
    // 跳转到设计页面或其他操作
}

// 添加新效果
const addNewEffect = () => {
    console.log('添加新效果')
    // 打开对话框或跳转页面添加新效果
}

// 打开大屏
const openScreen = () => {
    console.log('打开大屏')
    // 实际打开大屏的逻辑
}

// 监听表单变化自动保存
watch(form.value, (newVal) => {
    saveSettings()
}, { deep: true })
</script>

<style scoped src="@/styles/desktop/screenSetting.css"></style>